/* Animations -Kkeyframes - Argon LS */


@-webkit-keyframes intro_A {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	25% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	50% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	75% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	100% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
}
	
	
@-webkit-keyframes intro_R {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	25% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	50% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	75% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	100% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
}


@-webkit-keyframes intro_G {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	25% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	50% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	75% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	100% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
}


@-webkit-keyframes intro_O {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	25% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	50% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	75% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	100% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
}


@-webkit-keyframes intro_N {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	25% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	50% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	75% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	100% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
}


@-webkit-keyframes intro_argon {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	25% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
	50% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	75% {
		opacity: 1.0;-webkit-transform:translateY(-190px);
	}
	
	100% {
		opacity: 0.0;-webkit-transform:translateY(-190px);
	}
	
}

@-webkit-keyframes unlock {

	0% {			

			opacity: 0.0;

			}		

	90% {			

			opacity: 0.0;

			}					

	100% {

			opacity: 1.0;

			}						

}


@-webkit-keyframes frame {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(360px);
	}
	
	25% {
		opacity: 1.0;-webkit-transform:translateY(360px);
	}
	100% {
		opacity: 1.0;-webkit-transform:translateY(0px);
	}
}


@-webkit-keyframes mask {
	
	0% {
		opacity: 0.0;-webkit-transform:translateY(360px);
	}
	
	25% {
		opacity: 1.0;-webkit-transform:translateY(360px);
	}
	
	100% {
		opacity: 1.0;-webkit-transform:translateY(0px);
	}
}


body {
	margin: 0;
}

#background {
	position: absolute;
	top: 0px;
	width: 320px;
	height: 480px;
	overflow: hidden;
	z-index: 1;
}
	

#intro_A {
	position: absolute;		
	left: 100px;
	top: 325px;
	-webkit-animation-name: intro_A;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 4s;
       opacity: 0.0;
	-webkit-animation-timing-function: linear;     
	background-color: transparent;
	overflow: hidden;
	z-index:5;
}

#intro_R {
	position: absolute;		
	left: 100px;
	top: 325px;
	-webkit-animation-name: intro_R;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 5s;
       opacity: 0.0;
	-webkit-animation-timing-function: linear;     
	background-color: transparent;
	overflow: hidden;
	z-index:5;
	
}

#intro_G {
	position: absolute;		
	left: 100px;
	top: 325px;
	-webkit-animation-name: intro_G;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 6s;
       opacity: 0.0;
	-webkit-animation-timing-function: linear;     
	background-color: transparent;
	overflow: hidden;
	z-index:5;
}

#intro_O {
	position: absolute;		
	left: 100px;
	top: 325px;
	-webkit-animation-name: intro_O;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 7s;
       opacity: 0.0;
	-webkit-animation-timing-function: linear;     
	background-color: transparent;
	overflow: hidden;
	z-index:5;
}

#intro_N {
	position: absolute;		
	left: 100px;
	top: 325px;
	-webkit-animation-name: intro_N;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 8s;
       opacity: 0.0;
	-webkit-animation-timing-function: linear;     
	background-color: transparent;
	overflow: hidden;
	z-index:5;
}

#intro_argon {
	position: absolute;		
	left: -40px;
	top: 275px;
	-webkit-animation-name: intro_argon;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 9s;
       opacity: 0.0;
	-webkit-animation-timing-function: linear;     
	background-color: transparent;
	overflow: hidden;
	z-index:5;
}


#unlock {

	position: absolute;		
	width: 320px;
	height: 79px;
	-webkit-transform:translateX(0px) translateY(401px);
	opacity: 1.0;
	overflow: visible;
	background-color: transparent;	
	-webkit-animation-name: unlock;
    -webkit-animation-duration: 12s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;	
	z-index: 7;

}

#tap {
	position: absolute;
	top: 405px;
	width: 320px;
	height: 79px;
	-webkit-transform:translateX(0px) translateY(0px);	
	opacity: 1.0;
	overflow: visible;
	background-color: transparent;	
	z-index: 3;
}



#tapper {

	text-align: center;
	-webkit-transform:translateX(0px) translateY(0px);
	top: 38px;	
	position: absolute;	
	font: 14px "Tahoma";
	color: #000000;
    text-shadow: 0px 1px 1px #000000;			
	width: 320px;
	height: 31px;	
	letter-spacing: 2px;
	word-spacing: 0px;
	background-color: transparent;
	opacity: 0.5;
	z-index: 3;

}

#frame {
	position: absolute;
	top: 0px;
	left: -20px;
	-webkit-transform:translateY(0px);
	-webkit-animation-name: frame;
	-webkit-animation-duration: 23s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	overflow: hidden;
	z-index: 2;
}


#mask {
	position: absolute;
	top: 96px;
	left: 47px;
	-webkit-transform:translateY(0px);
	-webkit-animation-name: frame;
	-webkit-animation-duration: 23s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	overflow: hidden;
	z-index: 1;
}
